import React from 'react'
import { Link } from 'react-router-dom'
import { inject } from 'mobx-react';

import { Login } from '../../components/';

import './index.scss';

import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

// import { Swiper, Slide } from 'react-dynamic-swiper'
// import 'react-dynamic-swiper/lib/styles.css'

// import ImageLoader from '../../styles/ImageLoader'


@inject('loginStore')
class loginPage extends React.Component {



    render() {
        return (
            <div className="LoginPage page_container animated fadeInDown  fast">

                <div className="mid_container animated  delay-1s">
                    <div className="left_container">
                        <div className="swiper-container" style={{ width: '1200px', height: '600px' }}>
                            <div className="swiper-wrapper">

                                {
                                    this.props.loginStore.midPicList.map((item, index) => {
                                        return (
                                            <div key={index} className="swiper-slide" key={index}>
                                                <img src={item} alt="" />
                                            </div>
                                        )
                                    })
                                }

                            </div>
                            <div className="swiper-pagination"></div>
                        </div>
                    </div>
                    <div className="right_container">
                        <Login />
                    </div>
                </div>



            </div >
        )
    }

    componentDidMount() {
        new Swiper('.swiper-container', {
            loop: true,  //循环
            autoplay: {   //滑动后继续播放（不写官方默认暂停）
                disableOnInteraction: false,
            },
            pagination: {  //分页器
                el: '.swiper-pagination'
            }
        })
    }
}

export default loginPage;